<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRouter, onBeforeRouteLeave } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Back, EditPen, Delete } from '@element-plus/icons-vue';
const router = useRouter();
const { currentRoute } = useRouter();
import moment from 'moment'
const $moment = moment
import { surveyInfo, formatData, surveyDelete, updateForm } from '@/utils/api.js'
import openLayers from "@/components/common/openlayer.vue"
import iconSrc from '@/assets/icon/dongwuziyuananimal_anchor_bottom_center.png'
import close from '@/assets/icon/close.svg'
import h1 from '@/assets/img/h1.png'
import h2 from '@/assets/img/h2.png'
import h3 from '@/assets/img/h3.png'
import h4 from '@/assets/img/h4.png'

import nxxi from '@/assets/img/np.jpg'

const ols = ref(null);
const odb = ref({});
const finfo = ref([]);
const finfos = ref([]);
const ivlist = ref([]);

const isxg = ref(false)

const openxg = () => {

}

const delItem = (item) => {
    ElMessageBox.confirm(
        '确定要删除这条数据吗?',
        '消息提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            surveyDelete({
                type: currentRoute.value.query.fltype,
                surveyIdList: [currentRoute.value.query.id]
            }).then((res) => {
                if (res.code == '200') {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    goback();
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.msg,
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}


const onSubmit = async () => {
    console.log(finfos.value);

    let obj = {};
    finfos.value.forEach(e => {
        obj[e.field] = e.value
    })

    let res = await updateForm({
        surveyId: currentRoute.value.query.id,
        data: obj
    })

    getformatData()
    isxg.value = false
}

const getdetail = async () => {
    let res = await surveyInfo(currentRoute.value.query.fltype, currentRoute.value.query.id);
    if (res.code == '200') {
        let e = res.data.survey;
        odb.value = res.data.survey;
        if (res.data.mediaData && res.data.mediaData.length > 0) {
            ivlist.value = res.data.mediaData;
        } else {
            ivlist.value = [
                {
                    "id": "3e9128e5-4c90-4508-8fc2-cf81ce339e92",
                    "tag": "",
                    "path": nxxi,
                    "type": "image",
                    "relateId": "wls_dwdc_0037",
                    "areaId": "0000144",
                    "description": "AnimalsSurvey",
                    "insertTime": 1715342084982,
                    "aiStatus": "0",
                    "aiResult": [],
                    "time": null
                }
            ]
        }

        setTimeout(function () {
            ols.value.previewshape([{
                id: e.id,
                name: e.keywords,
                borderColor: "",
                fillColor: "",
                iconSrc: iconSrc,
                data: {},
                geojson: { coordinates: [e.lon, e.lat], type: "Point" }
            }], 'ceshi001')
        }, 1000)


        // let arrs = [];
        // res.data.trackData.forEach(e => {
        //     arrs.push([e[0], e[1]])
        // })
        // if (res.data.trackData.length > 0) {
        //     let z = [
        //         {
        //             id: "00188919",
        //             name: "",
        //             borderColor: "#0078ff",
        //             fillColor: "#0078ff",
        //             data: {},
        //             geojson: { coordinates: arrs, type: "LineString" }
        //         }
        //     ]
        //     setTimeout(function () {
        //         ols.value.previewshape(z, 'line001')
        //     }, 1000)

        // }
    } else {
        ElMessage({
            type: 'warning',
            message: res.msg,
        })
    }

}
const getformatData = async () => {
    let res = await formatData(currentRoute.value.query.id);
    if (res.code == '200') {
        finfo.value = res.data;
        finfos.value = reactive(JSON.parse(JSON.stringify(res.data)));
    } else {
        ElMessage({
            type: 'warning',
            message: res.msg,
        })
    }
}

const goback = () => {
    router.go(-1)
};

onMounted(() => {
    getdetail();
    getformatData();
})

defineExpose({
    $moment
})

onBeforeRouteLeave((to, from, next) => {
    let oldPath = to.path;
    let newPath = from.path;
    if (oldPath != '/history/animal') {
        window.sessionStorage.removeItem('hisanimal');
    }
    next()
});
</script>
<template>
    <div style="position: relative;">
        <div class="ha-title addt">
            <div>动物调查详情</div>
            <div>
                <el-button type="info" plain :icon="Delete" @click.stop="delItem" size="large">
                    删除
                </el-button>
                <el-button @click.stop="goback" size="large" :icon="Back">返回</el-button>
            </div>

        </div>

        <div class="hdts-b">
            <div>
                <div class="qzTitle">
                    <div></div>
                    <div><span>位置信息</span></div>
                </div>
                <div style="height: 16px;"></div>
                <open-layers ref="ols"></open-layers>
            </div>
            <div class="scol">
                <div class="qzTitle">
                    <div></div>
                    <div><span>基本信息</span></div>
                </div>
                <div style="height: 16px;"></div>
                <div class="hdts-info">
                    <div>
                        <div class="qsd-f-1">
                            <img :src="h1" alt="">
                        </div>
                        <div class="qsd-f-2">
                            <div style="color: #606266;font-weight: 700;line-height: 2;">巡护人员</div>
                            <div>{{ odb.workUser }}</div>
                        </div>
                    </div>
                    <div>
                        <div class="qsd-f-1">
                            <img :src="h2" alt="">
                        </div>
                        <div class="qsd-f-2">
                            <div style="color: #606266;font-weight: 700;line-height: 2;">调查时间</div>
                            <div>{{ odb.recordTime }}</div>
                        </div>
                    </div>
                </div>
                <div class="hdts-info">
                    <div>
                        <div class="qsd-f-1">
                            <img :src="h3" alt="">
                        </div>
                        <div class="qsd-f-2">
                            <div style="color: #606266;font-weight: 700;line-height: 2;">物种名称</div>
                            <div>{{ odb.keywords }}</div>
                        </div>
                    </div>
                    <div>
                        <div class="qsd-f-1">
                            <img :src="h4" alt="">
                        </div>
                        <div class="qsd-f-2">
                            <div style="color: #606266;font-weight: 700;line-height: 2;">发现位置</div>
                            <div>{{ odb.lon }}~{{ odb.lat }}</div>
                        </div>
                    </div>
                </div>

                <div class="qsd-f-dc">
                    <div class="qzTitle">
                        <div></div>
                        <div><span>记录信息</span></div>
                    </div>
                    <div style="display: flex;align-items: center;padding-right: 8px;">
                        <el-button type="info" plain :icon="EditPen" @click.stop="isxg = true" size="small">
                            修改
                        </el-button>
                    </div>
                </div>
                <div style="height: 16px;"></div>
                <el-carousel height="300px" style="padding: 24px;background-color: #F5F7FA;">
                    <el-carousel-item v-for="(item, index) in ivlist" :key="item.id">
                        <el-image v-if="item.type == 'image'" style="width: 100%; height: 100%"
                            :preview-teleported="true" :src="item.path" :zoom-rate="1.2"
                            :preview-src-list="[item.path]" />
                        <video style="width: 100%; height: 100%" v-if="item.type == 'video'" :src="item.path"
                            controls></video>
                    </el-carousel-item>
                </el-carousel>
                <div style="height: 16px;"></div>
                <el-table :data="finfo" style="width: 100%;" :row-style="{ height: '50px' }"
                    :header-cell-style="{ 'color': '#333', 'line-height': '40px' }">

                    <el-table-column label="字段名称" prop="label" />
                    <el-table-column label="填写内容" prop="value" />


                </el-table>
            </div>
        </div>

        <div class="ha-form" v-if="isxg">
            <div class="hf-box scol">
                <div class="hf-close" @click.stop="isxg = false">
                    <img :src="close" alt="">
                </div>

                <div class="qzTitle">
                    <div></div>
                    <span>修改表单</span>
                </div>
                <div style="height: 16px;"></div>
                <el-form label-width="auto" size="large">
                    <el-form-item v-for="(item, index) in finfos" :key="'huisdg' + index" :label="item.label">
                        <el-input v-if="item.type == 'input'" v-model="item.value" />
                        <el-select v-if="item.type == 'select'" style="width: 100%;" v-model="item.value"
                            placeholder="">
                            <el-option v-for="(i, x) in item.options" :key="'fedbxtevg' + x" :label="i.name"
                                :value="i.name" />
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确定</el-button>
                        <el-button @click.stop="isxg = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>


    </div>
</template>
<style scoped>
@import '../../assets/css/sdetails.css';

.ha-form {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, .5);
}

.hf-box {
    width: 500px;
    max-height: 900px;
    position: relative;
    padding: 24px;
    border-radius: 4px;
    background: #FFF;
    cursor: pointer;
}

.hf-close {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}
</style>

<style>
.el-carousel__arrow {
    background-color: #fff !important;
    color: #333 !important;
}
</style>